<template>
    <div class="person">
      <h2>汽车信息：一辆奔驰车{{car.brand}}，价值{{ car.price }}元</h2>
      <button @click="changePrice">修改价格</button>
      <br>
      <h2>游戏列表：</h2>
      <ul>
        <li v-for="g in games" :key="g.id">{{ g.name }}</li>
      </ul>
      <!-- 修改第一个游戏的名字的函数 -->
      <button @click="changeFirstGameName">修改第一个游戏的名字</button>
    </div>
  </template>
  
<script lang="ts" setup name="Person">
    import { reactive } from 'vue'
    //数据
    //ref和reactive的区别
    //ref是基本数据类型的响应式数据包括基本类型和对象类型
    // reactive是对象和数组的响应式数据不包括基本类型
    let car=reactive({brand:'奔驰',price:1000000})//对象
    //  console.log(car)
    let games=reactive([
      {id:'hasjdkjdd01',name:'英雄联盟'},
      {id:'hasjdkjdd02',name:'绝地求生'},
      {id:'hasjdkjdd03',name:'王者荣耀'}
    ])//数组
    //方法
    function changePrice(){
      car.price+=100000
    }
      function changeFirstGameName(){
        games[0].name='英雄联盟2'
      }
</script>

  <style scoped>
    .person {
      background-color: skyblue;
      box-shadow: 0 0 10px;
      border-radius: 10px;
      padding: 20px;
    }
    button {
      margin: 0 5px;
    }
    li {
      font-size: 20px;
    }
  </style>